<template>
    <section>
        <!-- <div class="top">
          <img src="@/mobile/imgs/back.png" alt="" @click="$router.go(-1)" />
        </div> -->
        <div class="logo">
            <img src="@/mobile/imgs/logo.png" alt=""/>
        </div>

        <ul>
            <li>
                <a @click="$troute.query('mmIndex')">
                    <img src="@/mobile/imgs/nav-1.png" alt=""/>
                    <p>会员管理</p>
                </a>
            </li>

            <li v-if="isShow('activityList')">
                <a @click="$troute.query('activityList')">
                    <img src="@/mobile/imgs/nav-2.png" alt=""/>
                    <p>活动专区</p>
                </a>
            </li>

            <li v-if="isShow('difficultyHelp')">
                <a @click="$troute.query('difficultyHelp')">
                    <img src="@/mobile/imgs/nav-3.png" alt=""/>
                    <p>困难帮扶</p>
                </a>
            </li>

            <!-- <li>
              <a @click="$troute.query('msIndex')">
                <img src="@/mobile/imgs/nav-4.png" alt="" />
                <p>补充医疗互助<br />申请</p>
              </a>
            </li> -->

            <!-- <li>
              <a @click="$troute.query('mvIndex')">
                <img src="@/mobile/imgs/nav-5.png" alt="" />
                <p>投票选举</p>
              </a>
            </li> -->
            <li>
                <a @click="$troute.query('HWVote')">
                    <img src="@/mobile/imgs/nav-5.png" alt=""/>
                    <p>节日福利</p>
                </a>
            </li>

            <li>
              <a @click="$troute.query('mpIndex')">
                <img src="@/mobile/imgs/nav-6.png" alt="" />
                <p>教代会提案</p>
              </a>
            </li>

            <li v-if="isShow('fileDownloads')">
                <a @click="$troute.query('fileDownloads')">
                    <img src="@/mobile/imgs/nav-7.png" alt=""/>
                    <p>文件下载</p>
                </a>
            </li>
        </ul>
        <tabbar/>
    </section>
</template>
<script>
    import tabbar from "../components/tabbar.vue";
    import {
        mapMutations, mapState
    } from "vuex";
    import api from "@/data/api/index.js";
    import role from "@/router/index";
    import qs from "qs";
    import {Toast} from "vant";

    export default {
        components: {tabbar},
        data() {
            return {
                identity: {}
            }
        },

        mounted() {

            let data = {
                jsonStr: JSON.stringify(role.options.routes)

            };
            api.userInfo().then((res) => {
                if (res.user) {
                    this.zb = res.zb // 判断是否在编在岗
                }
            })
            this.identity = JSON.parse(sessionStorage.getItem("jurisdiction"));
            api.menuroleidbeTwo(qs.stringify(data))
                .then(res => {
                    //这里的getMenus是调用request方法从服务端获得路由菜单数据的Promise，类似getInfo
                    let menus = res.map(function (item) {
                        return item.path.slice(1);
                    });
                    this.SET_MENUS(menus)
                })
                .catch(error => {
                    Toast(error)
                });


        },
        methods: {
            ...mapMutations({
                SET_MENUS: "SET_MENUS",
            }),
            isShow: function (path) {
                const show = this.menus.findIndex((value) => {
                    return value == path
                })
                return show != -1 ? true : false
            }

        },
        computed: {
            ...mapState({
                menus: "menus"
            }),
        }
    };
</script>
<style lang="scss" scoped>
    section {
        min-height: 100vh;
        padding-bottom: 50px;
        background: #f1f0ee url(imgs/index.jpg) no-repeat center top;
        background-size: contain;

        ul {
            padding: 35px 15px 10px;
            overflow: hidden;

            li {
                float: left;
                width: 50%;
                padding: 0 15px 20px;
                box-sizing: border-box;

                a {
                    display: block;
                    padding: 25px 15px 15px;
                    text-align: center;
                    background-color: #fff;
                    border-radius: 10px;

                    img {
                        height: 60px;
                    }

                    p {
                        margin-top: 10px;
                        height: 40px;
                        line-height: 20px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .top {
        padding: 15px;

        img {
            height: 15px;
        }
    }

    .logo {
        padding: 10px 0 0 30px;

        img {
            height: 52px;
        }
    }
</style>
